<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算属性</title>
	<link rel="stylesheet" href="../style.css">
	<script src="../vue.js"></script>

	<!-- <script src="http://v1-cn.vuejs.org/js/vue.js"></script> -->
	<style>
		.box{
			width: 200px;
			height: 200px;
			background: red;
		}
	</style>
</head>
<body>
	<div id="app">
		<input type="button" value="click" v-on:click="a=!a">
		<div class="box" v-show="a"></div>
	</div>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				a:true,
			}
		})
	</script>

	<div id="app1">
		<input type="button" value="add">
		<ul>
		<!-- vue 1.0版本时候的写法 -->
		<!-- 	<li v-for="item in arr">{{item}}  {{$index}}  </li>
			<hr>
			<li v-for="child in json">{{child}}  {{$index}}  {{$key}}</li> -->

			<li v-for="(v,i) in arr">{{v}}  {{i}}  </li>
			<hr>
			<li v-for="(v,k,i) in json">{{v}}  {{k}}  {{i}}</li>
		</ul>
	</div>

	<script>
		var app1=new Vue({
			el:'#app1',
			data:{
				arr:['apple','banana','orange','pear'],
				json:{
					a:'apple',
					b:'orange',
					c:'banana'
				}
			}
		})
	</script>
</body>
</html>